<default-header class="top-header"></default-header>
<div class="wrap no-sidebar">
  <div class="sidebar-left collapse navbar-collapse navbar-collapse-2">
    <navbar-utility-mobile></navbar-utility-mobile>
  </div>

  <div class="add-to-project middle">
    <!-- Middle section -->
    <div class="middle-section surface-shaded">
      <div id="scrollable-content" class="middle-container has-scroll">
        <div class="middle-content">
          <div class="container surface-shaded">
            <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
            <div class="row">
              <div class="col-md-12">
                <alerts alerts="alerts"></alerts>
                <div ng-show="!pvcs || !(attach.deploymentConfig || attach.deployment)">Loading...</div>

                <div ng-show="pvcs && !pvcs.length && (attach.deploymentConfig || attach.deployment)" class="empty-state-message empty-state-full-page">
                  <h2 class="text-center">No persistent volume claims.</h2>

                  <p class="gutter-top">
                    A <b>persistent volume claim</b> is required to attach to this
                    <span ng-if="attach.deploymentConfig">deployment config,</span>
                    <span ng-if="attach.deployment">deployment,</span>
                    but none are loaded on this project.
                  </p>

                  <p>
                    To claim storage from a persistent volume, refer to the documentation on <a ng-href="{{'persistent_volumes' | helpLink}}">using persistent volumes</a>.
                  </p>

                  <p ng-if="attach.deploymentConfig"><a href="{{attach.deploymentConfig | navigateResourceURL}}">Back to deployment config</a></p>
                  <p ng-if="attach.deployment"><a href="{{attach.deployment | navigateResourceURL}}">Back to deployment</a></p>
                </div>

                <div class="row" ng-show="pvcs && pvcs.length && (attach.deploymentConfig || attach.deployment)">
                  <div class="create-storage-icon col-md-2 gutter-top hidden-sm hidden-xs">
                    <span class="fa fa-hdd-o icon-xl"></span>
                  </div>

                  <div class="col-md-8">
                    <h1>Attach Storage</h1>
                    <div>
                      <span class="help-block">
                        Attach an existing persistent volume claim to the template of
                        <span ng-if="attach.deploymentConfig">deployment config <b>{{attach.deploymentConfig.metadata.name}}</b>.</span>
                        <span ng-if="attach.deployment">deployment <b>{{attach.deployment.metadata.name}}</b>.</span>
                      </span>
                    </div>
                    <form name="attachPVCForm">
                      <fieldset ng-disabled="disableInputs">
                        <div class="form-group">
                          <label for="persistentVolumeClaim" class="required">Persistent volume claim</label>
                          <div>
                            <span id="persistent-volume-claim-help" class="help-block">Select the persistent volume claim to attach to.</span>
                          </div>
                          <table style="margin-bottom:0;background-color:transparent;" class="table table-condensed table-borderless">
                            <tbody>
                              <tr ng-repeat="pvc in pvcs track by (pvc | uid)">
                                <td style="padding-left:0;">
                                  <input
                                    type="radio"
                                    name="persistentVolumeClaim"
                                    ng-model="attach.persistentVolumeClaim"
                                    ng-value="pvc"
                                    aria-describedby="pvc-help">
                                </td>
                                <td><a ng-href="{{pvc | navigateResourceURL}}">{{pvc.metadata.name}}</a></td>
                                <td ng-if="pvc.spec.volumeName">{{pvc.status.capacity['storage'] | usageWithUnits: 'storage'}}</td>
                                <td ng-if="!pvc.spec.volumeName">{{pvc.spec.resources.requests['storage'] | usageWithUnits: 'storage'}}</td>
                                <td>({{pvc.spec.accessModes | accessModes | join}})</td>
                                <td>
                                  {{pvc.status.phase}}
                                  <span ng-if="pvc.spec.volumeName">
                                    to volume <strong>{{pvc.spec.volumeName}}</strong>
                                  </span>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>

                        <h3>Volume</h3>
                        <div>
                          <span class="help-block">
                            Specify details about how volumes are going to be mounted inside containers.
                          </span>
                        </div>

                        <div class="form-group">
                          <label for="route-name">Mount path</label>
                          <input
                              id="mount-path"
                              class="form-control"
                              type="text"
                              name="mountPath"
                              ng-model="attach.mountPath"
                              ng-pattern="/^\/.*$/"
                              placeholder="example: /data"
                              autocorrect="off"
                              autocapitalize="off"
                              spellcheck="false"
                              aria-describedby="mount-path-help">
                          <div>
                            <span id="mount-path-help" class="help-block">Mount path for the volume inside the container. If not specified, the volume will not be mounted automatically.</span>
                          </div>
                          <div class="has-error" ng-show="attachPVCForm.mountPath.$error.pattern && attachPVCForm.mountPath.$touched">
                            <span class="help-block">
                              Mount path must be a valid path to a directory starting with <code>/</code>.
                            </span>
                          </div>
                          <div class="has-error" ng-show="isVolumeMountPathUsed">
                            <span class="help-block">
                              Volume mount in that path already exists. Please choose another mount path.
                            </span>
                          </div>
                        </div>

                        <div class="form-group">
                          <label for="volume-name">Volume name</label>
                          <input
                              id="volume-path"
                              class="form-control"
                              type="text"
                              name="volumeName"
                              ng-model="attach.volumeName"
                              placeholder="(generated if empty)"
                              autocorrect="off"
                              autocapitalize="off"
                              spellcheck="false"
                              aria-describedby="volume-name-help">
                          <div>
                            <span id="volume-name-help" class="help-block">Unique name used to identify this volume. If not specified, a volume name is generated.</span>
                          </div>
                        </div>
                        <div class="has-error" ng-show="isVolumeNameUsed">
                          <span class="help-block">
                            Volume name already exists. Please choose another name.
                          </span>
                        </div>

                        <div ng-show="attach.containers.all">
                          The volume will be mounted into all containers. You can <a href=""
                            ng-click="attach.containers.all = false">select specific containers</a> instead.
                        </div>

                        <div ng-show="!attach.containers.all" class="form-group">
                          <h3>Containers</h3>
                          <div>
                            <span class="help-block">
                              Attach the volume to the following containers:
                            </span>
                          </div>
                          <div class="checkbox" ng-repeat="container in (attach.deployment.spec.template.spec.containers || attach.deploymentConfig.spec.template.spec.containers)">
                            <label>
                              <input type="checkbox" ng-model="attach.containers.individual[container.name]">
                              <b>{{container.name}}</b> from image <i>{{container.image}}</i>
                            </label>
                          </div>
                          <div class="has-error" ng-show="!containerToAttachProvided()">
                            <span class="help-block">
                              You must select at least one container.
                            </span>
                          </div>
                        </div>

                        <div class="button-group gutter-top gutter-bottom">
                          <button type="submit"
                              class="btn btn-primary btn-lg"
                              ng-click="attachPVC()"
                              ng-disabled="attachPVCForm.$invalid || disableInputs || !attachPVC || !containerToAttachProvided()">Attach</button>
                          <a class="btn btn-default btn-lg" role="button" href="#" back>Cancel</a>
                        </div>
                      </fieldset>
                    </form>
                  </div>
                </div>
              </div><!-- /col-md-* -->
            </div>
          </div>
        </div><!-- /middle-content -->
      </div><!-- /middle-container -->
    </div><!-- /middle-section -->
  </div><!-- /middle -->
</div><!-- /wrap -->
